<script setup lang="ts">

import {useConfigStore} from "@/stores/config";
import pinia from "@/stores";
import {storeToRefs} from "pinia";

const configStore = useConfigStore(pinia);
const {showLogo} = storeToRefs(configStore);

</script>
<template>
  <div :class="`${configStore.showConfigUI?'show':'hide'}`">
    <div class="new-ui-config">
      <el-form label-position="top">
        <el-row>
          <el-col>
            <el-form-item label="显示LOGO">
              <el-radio-group v-model="showLogo">
                <el-radio label="显示" :value="true"/>
                <el-radio label="不显示" :value="false"/>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
  </div>
</template>
<style scoped>
.new-ui-config{
  padding: 20px;
  width: 200px;
}
.hide {
  width: 0;
  transition: .5s width;
  padding: unset;
  overflow: hidden;
}
.show {
  width: 200px;
  transition: .5s;
  border-left: 1px solid var(--el-border-color);
}
</style>